<template>
  <div v-if="[1, true].includes(item.properties.isShow)" class="menu-item-container">
    <el-menu-item v-if="!item.children||item.children.length===0" :index="item.id" @click="handleMenuSelect(item)">
      <icon :iconClass="item.properties.icon ? item.properties.icon : ''" ></icon>
      <span slot="title" style="color:#fff">{{ item.title }}</span>
    </el-menu-item>

    <el-submenu v-else  :index="item.id" class="menu-item-submenu">
      <template slot="title">
        <icon v-if="item.parentId == '0'" :iconClass="item.properties.icon ? item.properties.icon : ''" ></icon>
        <!-- 菜单展开时的一级菜单-->
        <span slot="title" v-show="cpIsShowLeft">{{ getTitle(item.title)}}</span>
        <!--菜单-->
      </template>
      <menu-item  class="menu-item-list" v-for="child in item.children"
        :key="child.id"
        :item="child"
        :index="child.id"
        @select="handleMenuSelect"
        @keyup.native="handleEnterPress"

      />
    </el-submenu>
  </div>
</template>
<script>
import context from '@/main'

export default {
  name: 'menuItem',
  props: ['item', 'isCollapse', 'isShowLeft'],
  computed: {
    cpIsShowLeft() {
      return this.isShowLeft === false ? false: true
    },
  },
  methods: {
    handleMenuSelect(item) {
      this.utils.openMenu(item.properties.url)
    },
    handleEnterPress(event) {
      let {roleCodes = [], code} = this.utils.getCurrentUser()
      let show = false
      if (code == 'admin' || roleCodes.includes('admin')) {
        show = true
      }
      if (event.key !== 'Control' && event.code !== 'MetaLeft') {
        return
      }
      if (process.env.NODE_ENV === 'development' && show) {
        global.utils.openMenu('programmerMenu')
      }
    },
    resolvePath(item) {
      return '/' + item.properties.url
    },
    getTitle(title) {
      title = title.replace('(供应商)', '')
      title = title.replace('(医院)', '')
      title = title.replace('[供应商]', '')
      title = title.replace('[医院]', '')
      title = title.replace('【供应商】', '')
      title = title.replace('【医院】', '')
      return title
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .menu-item-submenu {
 .el-submenu__title {
    font-size: 16px !important;
    color: #fff !important;
    transition: 1s;
   i, svg {
     color: #fff !important;
   }
   &:hover, &.is-active {
     background-color: #1068f9  !important; //hover颜色
   }
  }
  &.is-opened {
    background-color: #184dde !important; //选中颜色
    color: #ffff8e;
  }

}

/deep/ .menu-item-list {
  &:hover {
    background-color: #2979fd !important;
  }
  .el-menu-item {
    font-size: 16px !important;
    &:hover {
      background-color: #1068f9 !important;//hover颜色 1068f9
      color: #ffff8e !important;
    }
    &.is-active {
      background-color: #1068f9 !important; //选中颜色 2a62fb
      i, span {
        font-weight: 800;
        color: #ffff8e !important;
      }
    }
    .svg-icon {
      display: none;
    }
  }
}

</style>
